"use client"

import { useEffect, useState } from 'react';
import styles from './styles.module.css';

interface SearchBarProps {
  onSearch: (term: string) => void;
}

export const SearchBar = ({ onSearch }: SearchBarProps) => {
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const handler = setTimeout(() => {
      onSearch(searchTerm.toLowerCase());
    }, 300);

    return () => clearTimeout(handler);
  }, [searchTerm]);

  return (
    <div className={styles.container}>
      <input
        type="text"
        placeholder="Search apps..."
        className={styles.input}
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
    </div>
  );
};